<template>
    <div class="track-container">
      1
      <div id="amap-container" style="width: 100%; height: 600px;"></div>
      <div class="controls">
        <button @click="startPlayback">播放</button>
        <button @click="pausePlayback">暂停</button>
        <button @click="resetPlayback">重置</button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  
  const AMAP_KEY = '73c0ff5056f16c8181a423b269c2b9f5';
  let map = null;
  let marker = null;
  let polyline = null;
  let animating = false;
  let pathIndex = 0;
  let timer = null;
  
  const path = ref([
    [116.397428, 39.90923],
    [116.398428, 39.90923],
    [116.399428, 39.90963],
    [116.400428, 39.91023],
    [116.401428, 39.91123],
  ]); // 示例轨迹，可替换为你的数据
  
// 动态加载高德地图JS API
function loadAMapScript() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
      return;
    }
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
    script.onload = () => resolve(window.AMap);
    script.onerror = reject;
    document.head.appendChild(script);
  });
}
  
  onMounted(async () => {
    await loadAMapScript();
  
    map = new window.AMap.Map('amap-container', {
      center: path.value[0],
      zoom: 15,
    });
  
    // 绘制轨迹折线
    polyline = new window.AMap.Polyline({
      path: path.value,
      strokeColor: '#FF0000',
      strokeWeight: 4,
      strokeOpacity: 0.8,
    });
    map.add(polyline);
  
    // 添加起点 marker（小车）
    marker = new window.AMap.Marker({
      position: path.value[0],
      icon: 'https://webapi.amap.com/images/car.png', // 小车图标
      offset: new window.AMap.Pixel(-13, -26),
    });
    map.add(marker);
  });
  
  function startPlayback() {
    if (animating) return;
    animating = true;
    moveAlongPath();
  }
  
  function pausePlayback() {
    animating = false;
    if (timer) {
      clearTimeout(timer);
    }
  }
  
  function resetPlayback() {
    pausePlayback();
    pathIndex = 0;
    if (marker && path.value.length > 0) {
      marker.setPosition(path.value[0]);
    }
  }
  
  function moveAlongPath() {
    if (!animating || pathIndex >= path.value.length - 1) {
      animating = false;
      return;
    }
  
    const current = path.value[pathIndex];
    const next = path.value[pathIndex + 1];
    const steps = 100; // 每段分多少步
    let step = 0;
  
    const deltaLng = (next[0] - current[0]) / steps;
    const deltaLat = (next[1] - current[1]) / steps;
  
    function moveStep() {
      if (!animating) return;
  
      if (step <= steps) {
        const lng = current[0] + deltaLng * step;
        const lat = current[1] + deltaLat * step;
        marker.setPosition([lng, lat]);
        step++;
        timer = setTimeout(moveStep, 20); // 控制速度
      } else {
        pathIndex++;
        moveAlongPath(); // 进入下一段
      }
    }
  
    moveStep();
  }
  </script>
  
  <style scoped>
  .track-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }
  #amap-container {
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .controls {
    margin-top: 16px;
  }
  button {
    margin-right: 10px;
    padding: 8px 16px;
    font-size: 14px;
    background-color: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
  }
  button:hover {
    background-color: #1565c0;
  }
  </style>
  